<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
  <head>
    <th:block th:replace="~{/_include/header}" />
    <title>[[${bundle.L('列显示')}]]</title>
  </head>
  <body class="dialog">
    <div class="main-content">
      <div class="row m-0">
        <div class="col-6 sortable-swap">
          <h5 class="sortable-box-title">[[${bundle.L('已显示')}]]</h5>
          <div class="sortable-box h380 rb-scroller">
            <ol class="dd-list J_config"></ol>
          </div>
          <i class="zmdi zmdi-swap"></i>
        </div>
        <div class="col-6">
          <h5 class="sortable-box-title">[[${bundle.L('未显示')}]]</h5>
          <div class="sortable-box h380 rb-scroller">
            <ol class="dd-list unset-list"></ol>
          </div>
        </div>
      </div>
      <div class="dialog-footer">
        <div class="float-left">
          <div id="shareTo" class="shareTo--wrap"></div>
        </div>
        <button class="btn btn-link" onclick="parent.RbModal.hide()" type="button">[[${bundle.L('取消')}]]</button>
        <button class="btn btn-primary J_save" type="button">[[${bundle.L('保存')}]]</button>
      </div>
    </div>
    <th:block th:replace="~{/_include/footer}" />
    <script th:src="@{/assets/js/sortable.js}"></script>
    <script th:src="@{/assets/js/settings-share2.js}" type="text/babel"></script>
    <script type="text/babel">
      $(document).ready(function () {
        const entity = $urlp('entity')
        const settingsUrl = `/app/${entity}/list-fields`

        let overwriteMode = false
        let shareToComp
        let cfgid = $urlp('id')
        $.get(`${settingsUrl}?id=${cfgid || ''}`, function (res) {
          const _data = res.data || {}
          $(_data.fieldList).each(function () {
            render_unset([this.field, this.label])
          })
          $(_data.configList).each(function () {
            $('.unset-list li[data-key="' + this.field + '"]').trigger('click')
          })
          cfgid = _data.configId || ''

          // 覆盖自有配置
          if (res.data) {
            overwriteMode = !rb.isAdminUser && res.data.shareTo !== 'SELF'
          }

          $.get(`${settingsUrl}/alist`, (res) => {
            const ccfg = res.data.find((x) => x[0] === cfgid)
            if (rb.isAdminUser) {
              renderRbcomp(
                <Share2 title={$L('列显示')} list={res.data} configName={ccfg ? ccfg[1] : ''} shareTo={_data.shareTo} entity={entity} id={_data.configId} />,
                'shareTo',
                function () {
                  shareToComp = this
                }
              )
            } else {
              const data = res.data.map((x) => {
                x[4] = entity
                return x
              })
              renderSwitchButton(data, $L('列显示'), cfgid)
            }

            // 有自有才提示覆盖
            if (overwriteMode) {
              const haveSelf = res.data.find((x) => x[2] === 'SELF')
              overwriteMode = !!haveSelf
            }
          })
        })

        $('.J_save').click(function () {
          const config = []
          $('.J_config>li').each(function () {
            config.push({ field: $(this).data('key') })
          })
          if (config.length === 0) return RbHighbar.create($L('请至少选择 1 个显示列'))

          const _save = function () {
            const $btn = $(this).button('loading')
            const shareToData = shareToComp ? shareToComp.getData() : { shareTo: 'SELF' }
            $.post(
              `${settingsUrl}?id=${cfgid}&configName=${shareToData.configName || ''}&shareTo=${shareToData.shareTo || ''}`,
              JSON.stringify(config),
              function (res) {
                if (res.error_code === 0) parent.location.reload()
                $btn.button('reset')
              }
            )
          }

          if (overwriteMode) {
            RbAlert.create($L('保存将覆盖你现有的列显示。继续吗？'), {
              confirm: function () {
                this.hide()
                _save()
              },
            })
          } else {
            _save()
          }
        })
      })
    </script>
  </body>
</html>
